#html external css

[shoresdevelopment]

External CSS and how to use it https://shores.dev/external-css-and-how-to-use-it/?utm_source=tumblr&utm_medium=social&utm_campaign=ReviveOldPost

[theneighborhoodwatch]

what are the basic requirements for maintaining the website? like. aside from a basic understanding of how to format and code it

(context)

welcome to welcome home started as a pretty scrappy personal project, and tbh it still is. there's not a whole lot you'll need, but off the top of my head the base requirements would be:

as you've said, at least a Basic understanding of html/css. i did Not have this when i first started welcome to welcome home and It Shows; i learned in real time by playing with the parameters of the template i used. (side note: if whoever ends up getting the site wants to give it a makeover and has the skills to do so, i will Not be opposed to it. bonus points if they find a way to make it more mobile-friendly.)

ability to update all relevant pages within a few days of a given update alongside adding new pages for characters, locations, secrets/walkthroughs, etc.

an email address

access to some kind of external file host (i use filegarden, but any will do.) alternatively, neocities gives you a much larger storage space if you have 5 dollars a month to spare.

[zilodak]

I’m a complete beginner when it comes to any coding and I’m not sure if you are or not, but was it easy to begin making the site using rarebit?

I'm a complete beginner as well! I've only coded a navigation bar back in middle school for an assignment and then never again, so Rarebit was overwhelming when I started.

However, you'll realize that it's pretty straightforward the more you read the code over and over again. I suggest opening up the Rarebit folder in an external terminal that isn't Neocities like Visual Studio Code and download the Live Preview plug-in from Microsoft. This let's you see your website in live time and not have to code blindly like in Neocities.

HTML is extremely straightforward and easy to grasp. It's CSS you have to learn and worry about since it's what makes your website look like your website.

I haven't touched Javascript yet, that's a bit more complex, but nothing a YouTube video or a forum can't help with.

It just takes time and patience like any other skill to learn!

I recently learnt how to use flexbox!

[robfinancialtip]

In this video, I walk through our optimization process for Buyist Pro. We start by refining the HTML, moving all CSS to external files for faster page loads.

[amesliu]

This week in Ames' Sohae Side Quests!

I know most people don't even use the "front-end" of tumblr or they use it on their phones so desktop themes have sort of fallen out of fashion but I've been learning HTML/CSS ahead of some continuing ed I'm planning to do. For a personal project I coded a desktop site for SOHAE that I'm going to keep updated as I upload new SPBH chapters.

Originally I was gonna make it a tumblr desktop theme but the need for it to work well with both the dash and the desktop site, I just couldn't make it look the way I wanted it to look so I made it an external site.

There's still some things I'm working on, like how chrome is flagging the subpages as deceptive for some reason (I swear it's not), and I'm working on redirecting sohae's desktop blog to it (disabled the custom them temporarily while I do so).

Anyways, it's here if you want to look at it. See you on Sunday for Ch12 of SPBH.

[irlmaeda]

Hiya! I found your blog through your neocities website! I was wondering if there’s any tips or things you read/watched that help you make your site. (Im heavily considering making one of my own neocities site it just seems fun)

hihi welcome !! i have quite a few pieces of advice, but the tldr is you should come up with an idea for what you want to make beforehand, and look up how to do each piece! your knowledge will start to fill in along the way :]

(this is probably gonna be long as hell so under the cut is all of the fun stuff /silly)

the way i personally started off was by sketching out what i wanted my site to look like! if you know what you want before you begin, you'll know where to look to figure out what you need to do. html+ css are extremely easy languages to read/write once you know what to look for!

^ this was the original sketch for my site, where i planned out everything i wanted to include. it's a bit different from what actually ended up on the site, but that's alright! it's just about having an outline to work from. i think of it like outlining before you write, it feels like such a pain in the ass because u just wanna start working NOW but u will thank yourself later for taking the time to plan.

once you know what you want to make, start looking for tutorials and resources to make it easier! the grid for my homepage and some of my other subpages was made using a css grid generator, since its one of the more confusing bits of css. you can make grids without it, but its a very easy way to make a more asymmetrical design if ur using the generator!

thats linked here, it gives you some css to put in your head or css sheet, and then the html for the different boxes to slap in your main document. it can be easier to understand what itll look like if you give each one a border while you work, even if its just temporary!

when looking for information about css and html, w3schools is your best friend. its a pretty comprehensive database of every little piece of html + css you could ever need, with examples you can play with yourself to understand what each variable does! it's been a lifesaver for me, ive watched basically zero video tutorials because everything on there is explained so well and you can find basically Anything.

they even have code snippets for things that take more than one or two lines of code, which you can use and adapt yourself! (the tooltips on the official art + my art sections on the hinata shrine were adapted from a tutorial on there!)

in general, having a plan and working from there will make ur life so much easier. the pages that ive sketched out beforehand or ive had a very clear vision for have been WAYY easier to code than the ones i tried to come up with on the fly, and ive been much happier with how they've turned out as well. though i do also have some smaller, rapidfire tips as well that ill go thru now!!

— inline css (the style="" tag) seems so so useful but really should only be used when you're resizing images like buttons. when u keep all of your css in the head or in a seperate document, its way easier to debug and read later. i cleaned up my homepage recently by removing all of the inline css and looking at the code stresses me out WAY less because i can actually read it LOLOL ... plus cutting the css out and putting it in its own document made me realize that id accidentally wrote some really weird code in some places

— this is very much 'do as i say, not as i do,' but use an external editor (like visual studio code) instead of editing live on neocities! you can set up a live preview, and generally wont be pushing out 100 updates every single time you change or add something. i tend to code directly on neocities but its a bad habit and i want to break it eventually v_v

— if you really like an effect someone else has on their site, you can peek using inspect element i promise the coding police won't get you !! dont steal code line for line, but you can figure out what theyre doing and put your own spin on it. things like border images can be really cool, and i only figured out about them because i looked at what someone else was doing and figured out how to adapt it for my own site! check linkbooks and credit sections as well, a lot of people will include links to any effect they didnt make themself or got help with. (including me! the credits section of the linkbook has a ton of little things i got from other places, including a really neat little music player, the rss feed for my status cafe, and the wobbly text on the homepage!)

— most stuff in html and css basically just... says what it does in the tag. so looking stuff up for it is extremely easy! if you've used carrd before you honestly probably already know more abt html than u'd think just intuitively. when ur adjusting the margins or padding in carrd, you're adjusting the margin: and padding: properties in the css of the website it's outputting!

this is getting way too long but!! my best advice is to just get started. you'll never be able to learn without trying, and it genuinely is so fun to have something that's truly your own!

(if u have any specific questions im happy to answer anytime as well! i love talking abt neocities, its a super fun hobby and way easier to pick up than u would think!)

[wherechaoswins]

50 Essential To-Do List Items for Writers to Earn Online in 2025

Discover the 50 actionable tasks every freelance writer should include in their to-do list to maximize online income. From setting up profiles to mastering SEO, get started today!

Whether you are a seasoned wordsmith or just starting out, earning online as a writer requires more than just a knack for language. You need a clear roadmap—a to-do list that guides you through building your brand, honing your skills, finding clients, and optimizing your online presence. In this article, we will break down 50 essential tasks that will help you launch and grow a sustainable online writing career in 2025.

1. Set Your Foundations

Define Your Niche

Establish Your Writing Goals

Outline Your Unique Value Proposition

Create a Professional Email Address

Purchase a Domain Name

2. Build Your Online Portfolio

Set Up a Personal Website or Blog

Showcase 3–5 High-Quality Writing Samples

Write an “About Me” Page with Keywords

Add a Clear Call-to-Action (CTA)

Include Testimonials or Case Studies

3. Optimize for SEO

Research High-Value Keywords

Implement On-Page SEO Best Practices

Write SEO-Friendly Headlines (H1/H2/H3)

Use Internal and External Links Strategically

Ensure Fast Page Load Times

4. Establish Your Presence on Freelancer Platforms

Create Profiles on Upwork, Fiverr, and Freelancer

Write Compelling Profile Summaries with Keywords

Set Competitive—but Sustainable—Rates

Apply to 5 Relevant Gigs per Week

Solicit Initial Reviews from Small Jobs

5. Leverage Content Marketplaces & Agencies

Join Contena, Scripted, or Clear Voice

Submit Proposals to 3–5 Agencies

Complete Platform Skill Tests

Network with Other Writers in Private Groups

Track Applications in a Spreadsheet

6. Grow Your Network

Engage in Writing Communities on LinkedIn

Participate in Twitter Chats (e.g., #WritingCommunity)

Attend Virtual and Local Writing Workshops

Collaborate on Guest Posts

Ask for Referrals from Past Clients

7. Develop Your Skills

Enroll in an SEO Writing Course

Practice Copywriting Techniques Weekly

Learn Basic HTML/CSS for Formatting

Study Content Marketing Strategies

Read 1–2 Industry Blogs Every Day

8. Diversify Your Income Streams

Write and Self-publish an eBook

Create a Paid Newsletter (e.g., Substack)

Offer Editing and Proofreading Services

Run Paid Writing Workshops or Webinars

Develop a Patreon or Membership Tier

9. Market Yourself Effectively

Build an Email List & Send Weekly Updates

Optimize Social Media Profiles

Share 2–3 Samples of Your Work Per Month

Use Tailored Pitches for Prospective Clients

Invest in Targeted Ads (LinkedIn/Facebook)

10. Stay Organized & Maintain Growth

Use a Project Management Tool (Trello/Asana)

Set Weekly and Monthly Income Targets

Review Analytics (Website & Social)

Schedule Time for Rest and Skill Building

Periodically Update Your Portfolio & Rates

Building a successful online writing career is a marathon, not a sprint. By systematically working through these 50 to-do list items, you will create a robust foundation for attracting clients, boosting your visibility, and maximizing your earnings in 2025. Bookmark this article, check off tasks as you go, and revisit it regularly to stay on track—your freelance writing empire starts today!

Ready to act? Start with item #1: define your niche—and watch your online writing income grow!

[mountmortar]

do you happen to know any site building tutorials to follow and learn from? been having a hard time finding a place to start with my own neocity but the free reign and customization of them interests me a lot :0c

ABSOLUTELY! I do want to stress one thing if HTML/CSS is something you're not familiar with: It's okay if your website doesn't look like the most creative, eye-popping thing in the world! I've seen sooooooo many people get so discouraged because their beginner websites don't look like the flashier websites you see on Neocities' front page (by people who've been coding for a Long Time, mind you!) and like!!! That's fine!!! The code of my own site was quite possibly the worst thing you've ever seen thrown together into one big CSS soup before I Literally Just Rewrote It Today, After A Year Of Having A Neocities. And so, with that being said:

As anyone on the internet might do, w3schools is the absolute first place I'd recommend to beginners! There are videos, it's mostly a text-based learning site with lots of exercises to test your knowledge. If you'd prefer videos:

My personal favorite guy on Youtube to learn coding things from is Giraffe Academy: Here's his full course on HTML! The video itself is about two hours—I skimmed through it and everything seems to be perfectly oriented towards beginners (I haven't watched it in its entirety, but I have seen his videos on C# and Python [programming languages, don't worry about it] and they did a lot to help explain certain things to me that I didn't know previously!).

BroCode's HTML in 1 hour and CSS in 1 hour are pretty good! His videos do include a little bit on how to implement some JavaScript here and there, but nothing major or terrifying.

Here's a playlist of HTML/CSS tutorials in bite-sized videos, too! Think about 10-25 minutes per video.

I will say that searching for YouTube videos on HTML/CSS will always sort of gear more towards what people in the professional sphere are looking for rather than what you'd see on Neocities.

As for Neocities-specific things (which may be the actual point of your ask! Might've misinterpreted the hell out of it oops):

sadgrl.online is perhaps the most known website on Neocities, largely because the website itself not only has a layout maker you're free to use if you want to make a website now but the thought of writing HTML/CSS from scratch terrifies you, but also HTML/CSS guides themselves! There's also a bunch of links you can use to help fluff up your site a bit, generate HTML code for you, or just fluff up your site in general.

The Melonland Project is also dedicated to providing website development tools and tutorials for beginners: here is its guide to making a website on Neocities! It also provides a link to learnlayout.com, which I'll link here as well—a website for helping you learn CSS layouts!

And, once you've got the hang of how CSS works but are still feeling unable to code it yourself (no ideas? just not feeling up to it? FUCK MAN DO I UNDERSTAND THAT) Eggramen has free CSS pages you can use, and all you have to do is write the HTML for it!

But I would always focus more on learning HTML first before any CSS—and then learning how to integrate CSS into HTML via inline styling (which those video tutorials do!) before worrying about any external stylesheets or whatever. HTML is the actual building block—CSS just makes it look pretty.

[ranidspace]

"I cant switch to firefox because..."

"It's too much effort to switch"

If you install firefox, it will ask if you want to import your browsing history, bookmarks, saved passwords*, and in a as of october of this year your extensions as well.

*dont use your browsers built in password manager. they're very much not as secure, even firefox's. read about passwords here

You can't import cookies for security reasons, but external tools can do that for you (try to avoid this. if you do have some data you need moved over, usually websites have their own "export data as file" option)

Everything else that you may need to fully complete the switch will come up naturally over time, the initial setup can be half an hour, or if you're happy with how it is at the start, less than 5 minutes.

"They don't support [website]"

Firefox is entirely up to date on current HTML, CSS, and Javascript standards. Theres a bunch of websites that compare all the features that firefox supports compared to chrome and stuff and they're often just, wrong? I've used some MANY of the features that firefox supposedly doesn't support. Plus they're constantly updating it for added support of new and old features. anything they refuse to add is due to security reasons, and nobody uses those features anyway.

In my experience i've never had to switch to chrome to avoid a website breaking. Sometimes it was because of an extension* but thats a very easy fix. Firefox has profiles built in and really good troubleshooting features.

*(stop using privacy badger/possum, please, it's built into firefox now, most of all privacy addons are completely useless because firefox already does it for you!!! ublock is safe tho i love u bbg)

If a site tells you "switch to chrome to see this site as intended" they're lying, and you can use a user agent switcher to trick them into thinking you're on chrome

"i need chrome for work or school"

i'd say 4 times out of 5 you don't, they say you have to use it but in reality it's just that they have better control over what you can do with it.

My high school had a shit ton of extensions automatically installed on chrome, including some shit that was literally spyware, it reported to teachers and staff all of your tabs you have open at any given time, and they could force shutoff tabs and force things open. They had absolutely no control or ability to monitor me when i switched to firefox, and there werent any problems that arose from it.

You can also just use chrome for school/work and use firefox for your personal web browser. separate your work life and personal life, you can do this with two different firefox profiles as well.

"I don't like change"

The only thing that's different about firefox in a day to day usage is the bar at the top, which is entirely customizable. Right click, customize toolbar, and you can mess around with it to make it the same layout as chrome. you can also get rid of those weird empty spaces to the left of the search bar they add by default for some reason. mozilla pls fix. You can further use themes to make it even look even more similar to chrome, I did that with my school profile to differentiate them.

When I switched, there wasn't anything I missed, I didn't have any of the "ugh i dont like how [blank] is in a different spot", or "ugh they dont have [this]". it just worked. It's a web browser, it works and does everything it needs to be. I didn't miss chrome at all, nothing felt different and the adjustment period to the new browser was LESS than what i felt when chrome updated the design in 2018.

"I have no reason to switch"

If you care about privacy at all (which you should), i could list hundreds of reasons why you should switch. Google removed "don't be evil" from their code of conduct for god sake lmao. Every new change they do is a ploy to get as much data from you and feed you as many ads as possible.

The dumping of Manifest V2/dynamic filtering not only makes most adblockers useless, it makes any sort of content blocking worse. Blocking trackers, malware, intrusive and annoying website features, these are things ublock does for you which chrome is doing its best to get you to stop doing. They want you to be exposed to predatory ads and malware so they can get more money.

If you have issues with ram usage and performance issues, firefox includes a lot of (lesser known) features to monitor RAM and CPU usage. While it seems as it may use more RAM, it automatically releases it when more ram is needed by other programs, effectively using less. It also uses much less ram in total in cases where there's 10+ tabs open.

Firefox can automatically block sites from auto-playing videos whenever you go on them

As mentioned firefox has so many more customization features than chrome, allowing you theme and move around everything to your hearts content

While on desktop, Chrome and Firefox are very close in functionality, on mobile, Firefox is working to add full extension support to mobile, it already has a small catalogue of extensions you can use, such as uBlock Origin. It has all of the desktop privacy features as well.

Firefox, only has about 3% of the market share. Other than that, chromium controls over 70% of all browsers, with apple controlling over 20%. The less people use firefox, the more control TWO companies have on the very act of using the internet. The Mozilla Foundation is a fully non-profit organization, with full ownership over the mozilla corporation, they don't have shareholders, and prioritize an open, safe, and private internet. Don't let them die.

"but what about..."

there's probably other reasons but the last of my advice:

you can have multiple browsers at once, install firefox and don't get rid of chrome. try firefox, see if there's anything you don't like, and try to fix it, and whenever you feel the need to, you can go back to the browser you already had.

[hob28]

Learn HTML and CSS: A Comprehensive Guide for Beginners

Introduction to HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the core technologies for creating web pages. HTML provides the structure of the page, while CSS defines its style and layout. This guide aims to equip beginners with the essential knowledge to start building and designing web pages.

Why Learn HTML and CSS?

HTML and CSS are fundamental skills for web development. Whether you're looking to create personal websites, start a career in web development, or enhance your current skill set, understanding these technologies is crucial. They form the basis for more advanced languages and frameworks like JavaScript, React, and Angular.

Getting Started with HTML and CSS

To get started, you need a text editor and a web browser. Popular text editors include Visual Studio Code, Sublime Text, and Atom. Browsers like Google Chrome, Firefox, and Safari are excellent for viewing and testing your web pages.

Basic HTML Structure

HTML documents have a basic structure composed of various elements and tags. Here’s a simple example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>My First Web Page</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1>Welcome to My Web Page</h1>

    <p>This is a paragraph of text on my web page.</p>

</body>

</html>

: Declares the document type and HTML version.

: The root element of an HTML page.

: Contains meta-information about the document.

: Connects the HTML to an external CSS file.

: Contains the content of the web page.

Essential HTML Tags

HTML uses various tags to define different parts of a web page:

to : Headings of different levels.

: Paragraph of text.

: Anchor tag for hyperlinks.

: Embeds images.

: Defines divisions or sections.

: Inline container for text.

Creating Your First HTML Page

Follow these steps to create a simple HTML page:

Open your text editor.

Write the basic HTML structure as shown above.

Add a heading with the tag.

Add a paragraph with the tag.

Save the file with a .html extension (e.g., index.html).

Open the file in your web browser to view your web page.

Introduction to CSS

CSS is used to style and layout HTML elements. It can be included within the HTML file using the <style> tag or in a separate .css file linked with the <link> tag.

Basic CSS Syntax

CSS consists of selectors and declarations. Here’s an example:

css

Copy code

h1 {

    color: blue;

    font-size: 24px;

}

Selector (h1): Specifies the HTML element to be styled.

Declaration Block: Contains one or more declarations, each consisting of a property and a value.

Styling HTML with CSS

To style your HTML elements, you can use different selectors:

Element Selector: Styles all instances of an element.

Class Selector: Styles elements with a specific class.

ID Selector: Styles a single element with a specific ID.

Example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Styled Page</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1 class="main-heading">Hello, World!</h1>

    <p id="intro">This is an introduction paragraph.</p>

</body>

</html>

In the styles.css file:

css

Copy code

.main-heading {

    color: green;

    text-align: center;

}

#intro {

    font-size: 18px;

    color: grey;

}

CSS Layout Techniques

CSS provides several layout techniques to design complex web pages:

Box Model: Defines the structure of an element’s content, padding, border, and margin.

Flexbox: A layout model for arranging items within a container, making it easier to design flexible responsive layouts.

Grid Layout: A two-dimensional layout system for more complex layouts.

Example of Flexbox:

css

Copy code

.container {

    display: flex;

    justify-content: space-around;

}

.item {

    width: 100px;

    height: 100px;

    background-color: lightblue;

}

Best Practices for Writing HTML and CSS

Semantic HTML: Use HTML tags that describe their meaning clearly (e.g., , , ).

Clean Code: Indent nested elements and use comments for better readability.

Validation: Use tools like the W3C Markup Validation Service to ensure your HTML and CSS are error-free and standards-compliant.

Accessibility: Make sure your website is accessible to all users, including those with disabilities, by using proper HTML tags and attributes.

Free Resources to Learn HTML and CSS

W3Schools: Comprehensive tutorials and references.

MDN Web Docs: Detailed documentation and guides for HTML, CSS, and JavaScript.

Codecademy: Interactive courses on web development.

FreeCodeCamp: Extensive curriculum covering HTML, CSS, and more.

Khan Academy: Lessons on computer programming and web development.

FAQs about Learning HTML and CSS

Q: What is HTML and CSS? A: HTML (HyperText Markup Language) structures web pages, while CSS (Cascading Style Sheets) styles and layouts the web pages.

Q: Why should I learn HTML and CSS? A: Learning HTML and CSS is essential for creating websites, understanding web development frameworks, and progressing to more advanced programming languages.

Q: Do I need prior experience to learn HTML and CSS? A: No prior experience is required. HTML and CSS are beginner-friendly and easy to learn.

Q: How long does it take to learn HTML and CSS? A: The time varies depending on your learning pace. With consistent practice, you can grasp the basics in a few weeks.

Q: Can I create a website using only HTML and CSS? A: Yes, you can create a basic website. For more complex functionality, you'll need to learn JavaScript.

Q: What tools do I need to start learning HTML and CSS? A: You need a text editor (e.g., Visual Studio Code, Sublime Text) and a web browser (e.g., Google Chrome, Firefox).

Q: Are there free resources available to learn HTML and CSS? A: Yes, there are many free resources available online, including W3Schools, MDN Web Docs, Codecademy, FreeCodeCamp, and Khan Academy.

[saide-hossain]

Let's understand HTML

Cover these topics to complete your HTML journey.

HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:

1. Basics of HTML

Introduction to HTML

HTML Document Structure

HTML Tags and Elements

HTML Attributes

HTML Comments

HTML Doctype

2. HTML Text Formatting

Headings (<h1> to <h6>)

Paragraphs (<p>)

Line Breaks (<br>)

Horizontal Lines (<hr>)

Bold Text (<b>, <strong>)

Italic Text (<i>, <em>)

Underlined Text (<u>)

Superscript (<sup>) and Subscript (<sub>)

3. HTML Links

Hyperlinks (<a>)

Target Attribute

Creating Email Links

4. HTML Lists

Ordered Lists (<ol>)

Unordered Lists (<ul>)

Description Lists (<dl>)

Nesting Lists

5. HTML Tables

Table (<table>)

Table Rows (<tr>)

Table Data (<td>)

Table Headings (<th>)

Table Caption (<caption>)

Merging Cells (rowspan, colspan)

Table Borders and Styling

6. HTML Forms

Form (<form>)

Input Types (<input>)

Text Fields (<input type="text">)

Password Fields (<input type="password">)

Radio Buttons (<input type="radio">)

Checkboxes (<input type="checkbox">)

Drop-down Lists (<select>)

Textarea (<textarea>)

Buttons (<button>, <input type="submit">)

Labels (<label>)

Form Action and Method Attributes

7. HTML Media

Images (<img>)

Image Maps

Audio (<audio>)

Video (<video>)

Embedding Media (<embed>)

Object Element (<object>)

Iframes (<iframe>)

8. HTML Semantic Elements

Header (<header>)

Footer (<footer>)

Article (<article>)

Section (<section>)

Aside (<aside>)

Nav (<nav>)

Main (<main>)

Figure (<figure>), Figcaption (<figcaption>)

9. HTML5 New Elements

Canvas (<canvas>)

SVG (<svg>)

Data Attributes

Output Element (<output>)

Progress (<progress>)

Meter (<meter>)

Details (<details>)

Summary (<summary>)

10. HTML Graphics

Scalable Vector Graphics (SVG)

Canvas

Inline SVG

Path Element

11. HTML APIs

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Web Workers

History API

12. HTML Entities

Character Entities

Symbol Entities

13. HTML Meta Information

Meta Tags (<meta>)

Setting Character Set (<meta charset="UTF-8">)

Responsive Web Design Meta Tag

SEO-related Meta Tags

14. HTML Best Practices

Accessibility (ARIA roles and attributes)

Semantic HTML

SEO (Search Engine Optimization) Basics

Mobile-Friendly HTML

15. HTML Integration with CSS and JavaScript

Linking CSS (<link>, <style>)

Adding JavaScript (<script>)

Inline CSS and JavaScript

External CSS and JavaScript Files

16. Advanced HTML Concepts

HTML Templates (<template>)

Custom Data Attributes (data-*)

HTML Imports (Deprecated in favor of JavaScript modules)

Web Components

These topics cover the breadth of HTML and will give you a strong foundation for web development.

Full course link for free: https://shorturl.at/igVyr

[shoresdevelopment]

External CSS and how to use it https://shores.dev/external-css-and-how-to-use-it/?utm_source=tumblr&utm_medium=social&utm_campaign=ReviveOldPost

[ao3css]

Hello! I'm wondering if there's an easy way to, with HTML, forever change something within a work (bad summary I know)

Context; Writing a "House of Leaves" story and I want to change every mention of "house" blue as...that's kinda the motif for the Canon story. Anyways I don't want to have to continuously <span="blue">house</span> every single time the word pops up. I'm wondering if I can set up a preset within the workskin that the word house will always show up as blue without me having to code it in everytime.

Thank you for your consideration and any help you may provide.

Without JavaScript, (which you cannot use on AO3,) you cannot automatically change the contents of HTML.

You're going to have to use any external software (like word) that has a find a replace feature. use it to replace every instance of "house" with "<span class="blue">house</span>" in your text and then make a work skin with ".blue{color:blue;}" inside of the CSS.

Keep a backup as you might have to experiment and see what works best.

Hopefully this helps!

[ctechstudy]

Understanding HTML: The Building Blocks of the Web

In the vast landscape of the internet, HTML stands as the foundation upon which the digital world is built. From simple static web pages to dynamic interactive experiences, HTML (Hypertext Markup Language) plays a pivotal role in shaping the online landscape. Let's embark on a journey to demystify HTML and understand its significance in the realm of web development.

What is HTML?

HTML is a markup language used to create the structure and content of web pages. It consists of a series of elements, or tags, that define the various components of a web page, such as headings, paragraphs, images, links, and more. These elements are enclosed within angled brackets (< >) and typically come in pairs, with an opening tag and a closing tag, sandwiching the content they define.

The Anatomy of HTML:

Tags: Tags are the building blocks of HTML and serve as the basic units of structure. They encapsulate content and provide semantic meaning to different parts of a web page. Common tags include <html>, <head>, <title>, <body>, <h1> (heading), <p> (paragraph), <img> (image), <a> (anchor/link), and many more.

Attributes: Tags can also contain attributes, which provide additional information about the element. Attributes are specified within the opening tag and consist of a name and a value. For example, the <img> tag may include attributes such as src (source) to specify the image file and alt (alternative text) for accessibility purposes.

Nesting: HTML elements can be nested within one another to create hierarchical structures. This nesting allows for the organization and hierarchy of content, such as placing lists within paragraphs or dividers within sections.

Document Structure: Every HTML document begins with a <!DOCTYPE> declaration, followed by an <html> element containing <head> and <body> sections. The <head> section typically contains metadata and links to external resources, while the <body> section contains the visible content of the web page.

The Role of HTML in Web Development:

HTML serves as the backbone of web development, providing the structure and semantics necessary for browsers to interpret and render web pages correctly. Combined with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, HTML forms the core technology stack of the World Wide Web.

Conclusion:

In essence, HTML is the language of the web, enabling the creation of rich and immersive digital experiences. Whether you're a seasoned web developer or a newcomer to the world of coding, understanding HTML is essential for navigating the intricacies of web development. Embrace the power of HTML, and embark on a journey to craft compelling narratives and experiences in the ever-evolving digital realm.

[skinsort]

Hello, I've been thinking about code and selling code and sharing code in the rpc because someone posed the question to me of what I'd want to happen if someone was heavily editing a skin I sold, and to be honest, my first instinct was 'take my name off it'. That was met with some surprise, but let me explain why.

Code, to me, is a largely democratic landscape. If you want to learn, hundreds of thousands of people and websites have come together to teach you. Masses of people share open source work on codepen, stack overflow etc. Code as a skill is like assembling an especially abstract puzzle where you can only think about the pieces, not really see them. But most puzzles have similar strategies to solve- start with the corner pieces, then the edges, then the most recognizable patterns etc etc etc working your way down to the more and more difficult details. Most of code- most of my job writing code- involves minimizing the amount of time working on those shared strategies so we can have more time to work on the the interesting bits, the hard bits. the bits that make the site we're working on unique and useful. Frankly, jcink is the easy part of code, by and large. Your data is already structured and provided to you in a very particular way. It is inefficiently, but largely documented. Many other people have solved all the problems you are likely to have trying to build a skin. Skinning is html and css for the vast majority of items. It is the easy stuff. If I sell code, that code is now the property of the person I sold it to. It is not shareable or redistributable. You can't take my code and resell it as your own, but as far as I'm concerned you can do whatever you want with it. If I solved problems that might otherwise feel difficult (accessibility and responsiveness come to mind) cool. You can solve the easy ones, like styling and colors and fonts you like. You can add or subtract things that vibe with what you want that code to do. Once it is sold, it is yours to do with what you like when it comes to personal use. This is true of almost all coding contracts that exist in the entire world. If it weren't, no one would ever hire external contractors to do any work for their company, and I can tell you now, even companies which could fully afford to do all their tech in house absolutely do not in 99% of cases if their business isn't selling their own tech. The rule is generally- you may do anything you like with this, except resell it to someone else. So why take my name off it? I don't endorse how other people code. Even in my professional life, I've taken projects off my portfolio because the client took a project I worked on and broke it (imo), often with other professional developers doing the breaking. If a prospective employer were to go look at it, I'd be embarrassed by what it looks like today. Tell me why I (and my team) created a website that was fully responsive, and they went back to make it adaptive in the year of our lord 2022 because they preferred to have pixel perfect views at 3 specific breakpoints rather than a responsive site. I don't know, it's infuriating. I can't cite that project as an example of my work anymore, because it isn't. I would never leave a site in that state.

So, my first instinct with the idea of people using a skin i sell them as a base is 'take my name off it.' I don't want to be associated if responsive/accessible features are lost due to others working on a skin I wrote. But at the same time, where is the line between using something as a base, and editing a few small features? I certainly don't want to be an arbiter of that, or have to field questions or navigate feelings about it. In fact, personally I would not feel upset at all if someone used a paid for skin as a base, and inviting that kind of discussion is the only way I possibly could get upset since people have weird attitudes about a lot of this stuff. So I think the more practical standard is just to put credit, but make it explicit that the work has been heavily altered. Don't resell or redistribute, and you're golden, imo. Anyway, those are my feelings as someone who writes code for a living. I'm interested to hear counterpoints - constructively of course.

[amber-gimlet]

I'm still a novice in it obviously, but I have to say, the dynamic between html and css, specifically an html page and a css external style sheet, is just

sublime

the way that content and presentation can be efficiently adjusted independently from each other, that with sufficient foresight in terms of class and ids, you can simply reconfigure the final outcome according to your whims.

adjust colors and spacing, or adjust text with the comforting knowledge that the spacing will adapt automatically to compensate

idk I just want to stare at the text for awhile.